<template>
    <div class="grid gap-5 sm:grid-cols-3 grid-cols-4 pt-2 pb-5 px-2">
        <div class="" v-for="item in list">
            <div class="relative aspect-w-16 aspect-h-9 group/bgHover">
                <img class="w-full h-full object-cover rounded-md" :src="item.coverUrl" alt="">
                <div
                    class="absolute bottom-0 left-0 w-full h-full text-white flex items-center justify-center invisible group-hover:bg-black/50 group-hover/bgHover:visible  duration-300">
                    <svg t="1744514408530" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        @click="goPlayVideo(item.vid)" xmlns="http://www.w3.org/2000/svg" p-id="20338" width="50"
                        height="50">
                        <path
                            d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                            fill="#ffffff" p-id="20339"></path>
                    </svg>
                </div>
                <!-- 时长 -->
                <div class="absolute bottom-2 right-2 text-white text-xs px-1 py-0.5 bg-black/50 rounded-md">
                    {{ formatSongTime(item.durationms) }}
                </div>
            </div>
            <p class="text-sm line-clamp-2 text-ellipsis overflow-hidden py-2">{{ item.title }}</p>
            <p class="text-sm line-clamp-1 text-ellipsis overflow-hidden">
                <span class="text-gray-400" v-for="(artist, index) in item.creator">
                    {{ artist.userName }}
                    <i v-if="index < item.creator.length - 1">|</i>
                </span>
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { formatSongTime } from "@renderer/hooks"
import { useRouter } from "vue-router";

const router = useRouter()
const { list } = defineProps<{ list: any[] }>()

const goPlayVideo = (vid: number) => {
    router.push({
        path: '/playMv',
        query: {
            id: vid
        }
    })
}
</script>